// 统计页面-黑匣子统计

<template>
    <f7-page :page-content="false" class="v-statistics">
        <f7-navbar>
          <f7-nav-left>
            <f7-link icon-material="arrow_back" force @click="handleBack"></f7-link>
          </f7-nav-left>
          <f7-nav-title>黑匣子统计</f7-nav-title>
          <f7-nav-right></f7-nav-right>
        </f7-navbar>
        <!-- 设备使用情况 -->
        <div class="card-box" style="margin-top: 3.125rem;">
            <h4>
                <span>设备使用情况</span>
            </h4>
            <div class="info-content">
                <div>
                    <img src="../../../../assets/img/qzjx/statistics/icon1.png" alt="">
                    <div @click="fnToList({useStatus:1})">
                        <div class="text">在用起重机</div>
                        <span>{{ total || 0 }}</span>
                    </div>
                </div>
                <div>
                    <img src="../../../../assets/img/qzjx/statistics/jcgc_1.png" alt="">
                    <div @click="fnToListEng">
                        <div class="text">涉及工程</div>
                        <span>{{ engineeTotal || 0 }}</span>
                    </div>
                </div>
              </div>
            <div class="card-content access">
                <div class="title">
                    <img src="../../../../assets/img/qzjx/statistics/icon2.png" alt="" class="small-img">
                    黑匣子接入情况
                </div>
                <div class="content-box">
                  <section>
                    <div class="data-item" @click="fnToList({useStatus:1, isAccessTerminal: 1})">
                      <div>{{statModel.accessNum||0}}</div>
                      <div>已接入</div>
                    </div>
                    <div @click="fnToList({useStatus:'1', isAccessTerminal: '0'})" class="df jcsb">
                      <span class="label">未接入</span>
                      <span class="value" style="color:#F15A5A;">{{statModel.notAccessNum||0}}</span>
                    </div>
                  </section>
                  <section>
                    <div class="list-round">在线状态</div>
                    <ul>
                      <li @click="fnToList({terminalState:1,useStatus:'1'})" class="df jcsb">
                        <span class="label">在线</span>
                        <span class="value">{{statModel.onlineNum||0}}</span>
                      </li>
                      <li @click="fnToList({terminalState:'0',useStatus:'1'})" class="df jcsb">
                        <span class="label">离线</span>
                        <span class="value">{{statModel.offlineNum||0}}</span>
                      </li>
                    </ul>
                  </section>
                  <section>
                    <div class="list-round purple">接入标准</div>
                    <ul>
                      <li class="df jcsb" @click="fnToList({accessStandards:'new', isAccessTerminal:1})">
                        <span class="label">新国标</span>
                        <span class="value">{{statModel.newStandardsNum||0}}</span>
                      </li>
                      <li class="df jcsb" @click="fnToList({accessStandards:'old', isAccessTerminal:1})">
                        <span class="label">旧协议</span>
                        <span class="value">{{statModel.oldStandardsNum||0}}</span>
                      </li>
                    </ul>
                  </section>
                </div>
            </div>
            <div class="card-content">
                <div class="title">
                    <img src="../../../../assets/img/qzjx/statistics/icon3.png" alt="" class="small-img">
                    塔吊司机室监控
                </div>
                <ul class="box">
                    <li class="data-item" v-for="item in dataList1" :key="item.name"
                        @click="fnToList({isAccessVideo:String(item.value)})">
                        <div :style="{ 'color': item.color }">{{ statModel[item.key] || 0 }}</div>
                        <div>{{ item.name }}</div>
                    </li>
                </ul>
            </div>
            <div class="card-content">
              <div class="title">
                  <img src="../../../../assets/img/qzjx/statistics/icon4.png" alt="" class="small-img">
                  设备类型占比
              </div>
              <f7-echarts
                :options="deviceOptions"
                ref="deviceEcharts"
                class="echarts"
                @click="deviceChartClick"
                @legendselectchanged="deviceLegendClick"
              ></f7-echarts>
            </div>
            <ul class="deviceList">
              <li v-for="(item,index) in dataList3" :key="index" class="df jcsb">
                <span class="label">{{item.name}}</span>
                <span class="value">0</span>
              </li>
            </ul>
        </div>
        <!-- 设备使用情况 end -->

        <!-- 现场管理 start -->
        <div class="card-box">
          <div class="s-title" style="margin-bottom:.625rem;">
            <span style="width:65%">现场管理</span>
            <v-year-month-div :defValue="defDate" @confirm="handleMonth" type="date"></v-year-month-div>
          </div>
          <div class="card-content">
            <div class="title" @click="fnToListPlan({startDate:todayDate,endDate:todayDate})">
                <img src="../../../../assets/img/qzjx/statistics/icon5.png" alt="" class="big-img">
                <section class="right">
                  <span class="label">今日计划作业数量</span>
                  <span class="value">{{todayData.totalNum || 0}}</span>
                </section>
            </div>
            <ul class="plan-list">
              <li v-for="(item,index) in dataList4" :key="index" @click="fnToListPlan({processStatus:item.value,startDate:todayDate,endDate:todayDate})">
                <span class="value">{{todayData[item.code] || 0}}</span>
                <span class="label">{{item.name}}</span>
              </li>
            </ul>
          </div>
          <f7-echarts :options="options" ref="echarts" class="planEcharts today" @zrclick="handleClickChart1"></f7-echarts>
        </div>
        <!-- 现场管理 end -->

        <!-- 未来7天作业数量 and 作业计划统计 start -->
        <div class="card-box">
          <div class="s-title" style="margin-bottom:.625rem;">
            <span style="width:65%">未来7天作业数量</span>
          </div>
          <f7-echarts :options="planOptions" ref="echarts" class="planEcharts" @zrclick="handleClickChart"></f7-echarts>
          <div class="line"></div>
          <div class="s-title" style="margin-bottom:.625rem;">
            <span>作业计划统计</span>
            <v-year-month-range-div :defValue="defRange" @confirm="handleMonthRange($event,'defRange')" type="date"></v-year-month-range-div>
          </div>
          <ul class="plan-box">
            <li v-for="(item,index) in dataList5" :key="index">
              <section class="top" @click="fnToListPlan({workType:item.code,workStatus:1,startDate:defRange[0],endDate:defRange[1]})">
                <img :src="require(`../../../../assets/img/qzjx/statistics/icon${index+6}.png`)" alt="">
                <div>待{{item.name}} <span>{{modelData[`${item.icon}TodoNum`]||0}}</span></div>
              </section>
              <section class="bottom">
                <p @click="fnToListPlan({workType:item.code,workStatus:3,startDate:defRange[0],endDate:defRange[1]})">
                  <span class="label">已完成</span>
                  <span class="value">{{modelData[`${item.icon}DoneNum`]||0}}</span>
                </p>
                <p @click="fnToListPlan({workType:item.code,startDate:defRange[0],endDate:defRange[1]})">
                  <span class="label">{{item.name}}告知</span>
                  <span class="value">{{modelData[`${item.icon}TotalNum`]||0}}</span>
                </p>
              </section>
            </li>
          </ul>
        </div>
        <!-- 未来7天作业数量 and 作业计划统计 end -->

        <!-- 监测报警 start -->
        <div class="card-box">
          <div class="s-title" style="margin-bottom:.625rem;">
            <span>监测报警</span>
            <v-year-month-range-div :defValue="defRange1" @confirm="handleMonthRange($event,'defRange1')" type="date"></v-year-month-range-div>
          </div>
          <div class="card-content-box">
            <van-tabs v-model="activeWarning"
                  background="transparent"
                  color="#3C88FF">
              <van-tab v-for="(item,index) in statData" :key="index" :name="item.code">
                <div slot="title">
                    <i></i>
                    <span>{{item.name}}</span>
                </div>

                <div class="tab-content">
                    <template v-if="item.dataList.length>0">
                        <v-progress v-for="(citem, cindex) in item.dataList"
                                    :key="cindex"
                                    :total="item.total"
                                    :model="citem"></v-progress>
                    </template>
                    <template v-else>
                        <van-empty description="暂无数据" />
                    </template>
                </div>
              </van-tab>
            </van-tabs>
          </div>
        </div>
        <!-- 监测报警 end -->
    </f7-page>
</template>

<script>
import Controller from "@/libs/framework/controller";
import vYearMonthDiv from './components/yearMonthDiv.vue'
import vProgress from './components/progress.vue'
import vYearMonthRangeDiv from './components/yearMonthRangeDiv.vue'
import * as echarts from 'echarts'
export default class instance extends Controller {
  onBeforeInit() {
    this.urls = {
      // model: ["/mobileApi/equipment/getWorkPlanStatisticsByDate","/mobileApi/equipment/getTerminalAccessStatistics"],
      // model: "/mobileApi/equipment/getWorkPlanStatisticsByDate",
    };
  }
  onAfterQuery(type, isSuccess, result) {
    if(type=='form'){
      if(result.parameters&&result.parameters.countData)
      this.vm.modelData=result.parameters.countData
    }else if(type=='form$1'){
      if(result.parameters&&result.parameters.countData)
      this.vm.statModel=result.parameters.countData
    }
    return result;
  }
  onBeforeQuery(type, conditions, params) {
    if(type=='form'){
      // params.query.beginDate=this.context.defRange[0]
      // params.query.endDate=this.context.defRange[1]
    }
  }
  
  disableCache () {
    return true;
  }
  mixin () {
      return {
        components: {
          vYearMonthDiv,
          vYearMonthRangeDiv,
          vProgress,
        },
        data () {
          return {
              // 黑匣子监控
              dataList: [
                {
                  name: '已接入',
                  key: "isEntryCount",
                  value: 305,
                  code: "status1",
                  value1: '1'
                },
                {
                  name: '新国标',
                  key: "newCount",
                  value: 295,
                  code: "",
                  value1: ''
                },
                {
                  name: '旧协议',
                  key: "oldCount",
                  value: 10,
                  code: "",
                  value1: ''
                },
                {
                  name: '未接入',
                  key: "notEntryCount",
                  value: 19,
                  color: "#F15A5A",
                  code: "status1",
                  value1: '0'
                },
                {
                  name: '在线',
                  key: "onLineCount",
                  value: 300,
                  code: 'status',
                  value1: '1'
                },
                {
                  name: '离线',
                  key: "offLineCount",
                  value: 5,
                  code: 'status',
                  value1: '0'
                },
              ],
              // 司机室监控
              dataList1:[
                {
                  name: '已接入',
                  key: "accessVideoNum",
                  value: 1,
                  code: 'cameraStatus',
                  value1: '1'
                },
                {
                  name: '未接入',
                  key: "notAccessVideoNum",
                  value: 0,
                  color: "#F15A5A",
                  code: 'cameraStatus',
                  value1: '0'
                },
              ],
              dataList2:[
                {
                  name: "塔式起重机",
                  key: "",
                  value: 56
                },
                {
                  name: "施工升降机",
                  key: "",
                  value: 43
                },
                {
                  name: "门式起重机",
                  key: "",
                  value: 12
                },
                {
                  name: "桥式起重机",
                  key: "",
                  value: 0
                },
              ],
              dataList3:[
                {name:'使用登记牌过期',code:''},
                {name:'防坠器过期',code:''},
                {name:'未及时维保',code:''},
                {name:'未及时监测',code:''},
              ],
              dataList4:[
                {value:1,name:'未开始',code:'notStartNum'},
                {value:2,name:'人员入场',code:'entryNum'},
                {value:3,name:'待验收',code:'waitingNum'},
                {value:4,name:'已验收',code:'receiveNum'},
              ],
              // 未来7天作业计划
              dataList5:[
                {name:'安装',code:'INSTALL_NOTIFY',icon:'install',count:0,finishCount:0,notifyCount:0},
                {name:'顶升',code:'DIS_NOTIFY',icon:'up',count:0,finishCount:0,notifyCount:0},
                {name:'拆卸',code:'UP_NOTIFY',icon:'dis',count:0,finishCount:0,notifyCount:0},
              ],
              deviceData:[
                { value: 0, name: '塔式起重机' },
                { value: 0, name: '施工升降机' },
                { value: 0, name: '门式起重机' },
                { value: 0, name: '桥式起重机' },
              ],
              deviceOptions:{},
              options:{
                tooltip: {
                  trigger: 'item'
                },
                grid: {
                  top: '15%',
                  bottom: '10%',
                  left : '10%',
                  right:'2%',
                },
                xAxis: {
                  type: 'category',
                    data: [],
                    axisLabel: {
                      show: true,
                        interval: 0,
                        textStyle: {
                        color: "#5A6683", //文字的颜色
                        fontSize: 10
                      },
                    },
                    axisLine:{
                      show:false,
                    },
                    axisTick:{
                      show:false,
                    },
                },
                yAxis: {
                  type: 'value',
                  minInterval: 1,
                  axisTick:{
                    show:false,
                  },
                  axisLine:{
                    show:false,
                  },
                  splitLine:{
                      lineStyle:{
                        color:'#EBEEF5',
                        width:'0.5'
                      }
                  },
                  axisLabel: {
                    textStyle: {
                      color: "#8995AC", //文字的颜色
                      fontSize: 12
                    },
                  },
                },
                series: [{
                    data: [],
                    type: 'bar',
                    barWidth: 12,
                    itemStyle: {
                      normal:{
                        color: "#3E90FF",
                        barBorderRadius: 1,
                        label:{
                          show:false,
                          position:'top',
                          textStyle:{
                            color:'#243357',
                            fontWeight:'600',
                            fontSize:14
                          }
                        }
                      }
                    }
                  }
                ]
              },
              planOptions:{
                color:['#31D3F1','#56A7FF','#AD78FF'],
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'shadow',
                    shadowStyle: {
                      color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                          { offset: 0, color: 'rgba(25, 144, 255, 0.20)' },
                          { offset: 1, color: 'rgba(25, 144, 255, 0)' }
                        ]
                      ),
                    }
                  },
                  formatter: (params) => {
                    // 获取xAxis data中的数据
                    let dataStr = `<div><p style="color:#333333;margin:0;padding:0">${params[0].name}</p></div>`
                    params.forEach(item => {
                      dataStr += `<div>
                        <div style="margin: .3125rem 0;">
                          <span style="display:inline-block;margin-right:.3125rem;width:.625rem;height:.625rem;background-color:${item.color};"></span>
                          <span>${item.seriesName}</span>
                          <span style="float:right;color:#333;margin-left:1.25rem;font-weight:600;">${item.data}</span>
                        </div>
                      </div>`
                    })
                    return dataStr
                  }
                },
                grid: {
                  top: '15%',
                  bottom: '10%',
                  left : '10%',
                  right:'2%',
                },
                xAxis: {
                  type: 'category',
                    data: ['13', '14', '15', '16'],
                    axisLabel: {
                      show: true,
                        interval: 0,
                        textStyle: {
                        color: "#8995AC", //文字的颜色
                        fontSize: 12
                      },
                    },
                    axisLine:{
                      show:false,
                    },
                    axisTick:{
                      show:false,
                    },
                },
                yAxis: {
                  type: 'value',
                  minInterval: 1,
                  axisTick:{
                    show:false,
                  },
                  axisLine:{
                    show:false,
                  },
                  splitLine:{
                      lineStyle:{
                        color:'#EBEEF5',
                        width:'0.5'
                      }
                  },
                  axisLabel: {
                    textStyle: {
                      color: "#8995AC", //文字的颜色
                      fontSize: 12
                    },
                  },
                },
                series: [
                  {
                    data: [0, 0, 0, 0],
                    type: 'bar',
                    barWidth: 5,
                    barGap:'60%',
                    itemStyle: {
                      normal:{
                        barBorderRadius: 1,
                        label:{
                          show:false,
                          position:'top',
                          textStyle:{
                            color:'#243357',
                            fontWeight:'600',
                            fontSize:14
                          }
                        }
                      }
                    }
                  },
                  {
                    data: [],
                    type: 'bar',
                    barWidth: 5,
                    barGap:'60%',
                    itemStyle: {
                      normal:{
                        barBorderRadius: 1,
                        label:{
                          show:false,
                          position:'top',
                          textStyle:{
                            color:'#243357',
                            fontWeight:'600',
                            fontSize:14
                          }
                        }
                      }
                    }
                  },
                  {
                    data: [],
                    type: 'bar',
                    barWidth: 5,
                    barGap:'60%',
                    itemStyle: {
                      normal:{
                        barBorderRadius: 1,
                        label:{
                          show:false,
                          position:'top',
                          textStyle:{
                            color:'#243357',
                            fontWeight:'600',
                            fontSize:14
                          }
                        }
                      }
                    }
                  }
                ]
              },
              // 在用起重机
              total: null,
              // 设计工程
              engineeTotal:null,
              statModel:{},
              defDate:'',
              defRange:[],
              defRange1:[],
              activeWarning:'1',
              statData:[
                {
                  name:'报警类型统计',
                  code:'1',
                  total:0,
                  dataList:[
                    // {sort:1,num:2,name:'下减速限位【施工升降机】'},
                    // {sort:1,num:5,name:'下极限【施工升降机】'},
                  ]
                },
                {
                  name:'报警工程统计',
                  code:'2',
                  total:0,
                  dataList:[
                    // {sort:1,num:2,name:'下减速限位【施工升降机】'},
                    // {sort:1,num:5,name:'下减速限位【施工升降机】'},
                  ]
                },
              ],
              modelData:{},
              eqmTypeCountList:[],
              todayData:{},
          }

        },
        created () {
          this.init()
        },
        mounted(){
          // 监听 Android 手机的返回键
          document.addEventListener("backbutton", this.funcBack);
          // 监听 iOS 手机的 Home 键
          document.addEventListener("pause", this.funcBack);
          window.addEventListener("popstate", this.funcBack);
        },
        destroyed () {
          // 取消监听 Android 手机的返回键
          document.removeEventListener("backbutton", this.funcBack);
          // 取消监听 iOS 手机的 Home 键
          document.removeEventListener("pause", this.funcBack);
          window.removeEventListener("popstate", this.funcBack);
        },
        methods: {
          funcBack(val){
            localStorage.removeItem('defDate')
            localStorage.removeItem('defRange')
          },
          init(){
            this.defRange=JSON.parse(localStorage.getItem('defRange'))||this.getDate()
            this.defDate=localStorage.getItem('defDate')||''
            this.getDeviceData()
            this.getPlanData()
            this.getTodayPlanData()
            // 获取作业计划数据
            this.getData(
              "/statistics/crane/getWorkPlanStatisticsByDate",
              'modelData',
              {
                beginDate:this.defRange[0],
                endDate:this.defRange[1]
              },
            )
            // 获取黑匣子接入情况以及塔吊司机室监控数据
            this.getData(
              "/statistics/crane/getTerminalAccessStatistics",
              'statModel',
            )
          },
          getData(url,field,data={}){
            this.$util.getPromise(url,data).then(r => {
              if (r && r.success) {
                this[field]=r.parameters.countData||{}
              }else {
                this.$f7.dialog.toast(r.message||'数据获取失败')
              }
            }).catch(e=>{
              console.log(e);
              this.$f7.dialog.toast('数据获取失败')
            })
          },
          // 获取设备信息数据
          getDeviceData(){
            this.$util.getPromise('/statistics/crane/getEqmStatistic',{}).then(r => {
              if (r && r.success) {
                this.$nextTick(()=>{
                  this.total = r.parameters.propertyTotalNum
                  this.engineeTotal = r.parameters.engineeTotalNum
                  this.eqmTypeCountList=r.parameters.eqmTypeCountList
                  this.initDeviceChart(r.parameters.eqmTypeCountList)
                })
              }else {
                this.$f7.dialog.toast(r.message||'数据获取失败')
              }
            }).catch(e=>{
              console.log(e);
              this.$f7.dialog.toast('数据获取失败')
            })
          },
          // 初始化设备类型占比图
          initDeviceChart(list){
            if(!list) return
            const data=list.map(item=>{
              if(item.num)item.value=item.num
              return item
            })
            this.deviceOptions={
              color:['#87E7FF','#5DC7FB','#4B8EFB','#E087FF'],
              legend: {
                right: 10,
                top:'center',
                icon:'rect',
                itemHeight: 9,
                itemWidth: 9,
                orient: 'vertical',
                formatter: function (name) {
                  let arr=data.filter(item=>item.name==name)
                  return `{name|${name}} {value|${arr[0].value||arr[0].num}}`;
                },
                textStyle: {	// 添加
                  rich: {
                    name: {
                      fontSize: 12,
                      color:'#8995AC',
                      padding:[0,15,0,0],
                      lineHeight:20,
                    },
                    value: {
                      fontSize: 12,
                      color: '#333333',
                      fontWeight:600,
                      lineHeight:20,
                    },
                  }
                }
              },
              tooltip: {
                trigger: 'item'
              },
              grid: {
                top: '10%',
                bottom: '15%',
                left : '15%',
              },
              series: [
                {
                  // name: 'Nightingale Chart',
                  type: 'pie',
                  radius: [40, 70],
                  center: ['27%', '50%'],
                  roseType: 'area',
                  label: {
                    show: false,
                  },
                  data
                }
              ]
            }
          },
          // 设备类型legend点击事件
          deviceLegendClick(val){
            this.$refs.deviceEcharts.chart.setOption({
                legend:{selected:{[val.name]: true}}
            })
            let obj=this.eqmTypeCountList.find(item=>item.name==val.name)
            let code=obj.code
            this.fnToList({equipmentType:code})
          },
          // 设备类型饼图点击事件
          deviceChartClick(val){
            let code=val.data.code
            this.fnToList({equipmentType:code, useStatus: 1})
          },
          // 获取未来7天作业数量数据
          getPlanData() {
            this.$util.getPromise('/statistics/crane/getWorkPlanCountListByWeek',{}).then((res) => {
              if (res && res.success) {
                const { countList } = res.parameters
                this.$nextTick(()=>{
                  this.initPlanChart(countList)
                })
              } else {
                this.$f7.dialog.toast(res.message||'数据获取失败')
              }
            }).catch(e=>{
              console.log(e);
              this.$f7.dialog.toast('数据获取失败')
            })
          },
          // 作业计划echart图
          initPlanChart(data){
            this.planOptions={
              color:['#31D3F1','#56A7FF','#AD78FF'],
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow',
                  shadowStyle: {
                    color: new echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [
                        { offset: 0, color: 'rgba(25, 144, 255, 0.20)' },
                        { offset: 1, color: 'rgba(25, 144, 255, 0)' }
                      ]
                    ),
                  }
                },
                formatter: (params) => {
                  // 获取xAxis data中的数据
                  let dataStr = `<div><p style="color:#fff;margin:0;padding:0">${params[0].name}</p></div>`
                  params.forEach(item => {
                    dataStr += `<div>
                      <div style="margin: .3125rem 0;">
                        <span style="display:inline-block;margin-right:.3125rem;width:.625rem;height:.625rem;background-color:${item.color};"></span>
                        <span>${item.seriesName}</span>
                        <span style="float:right;color:#fff;margin-left:1.25rem;font-weight:600;">${item.data}</span>
                      </div>
                    </div>`
                  })
                  return dataStr
                }
              },
              grid: {
                top: '10%',
                bottom: '15%',
                left : '10%',
                right:'2%',
              },
              xAxis: {
                type: 'category',
                data: data.map(item=>item.date),
                axisLabel: {
                  show: true,
                    interval: 0,
                    textStyle: {
                    color: "#5A6683", //文字的颜色
                    fontSize: 15
                  },
                  formatter:function(value){
                    // x轴显示日期的最后两位
                    return value.substr(8,10)
                  },
                },
                axisLine:{
                  show:false,
                },
                axisTick:{
                  show:false,
                },
              },
              yAxis: {
                type: 'value',
                minInterval: 1,
                axisTick:{
                  show:false,
                },
                axisLine:{
                  show:false,
                },
                splitLine:{
                    lineStyle:{
                      color:'#EBEEF5',
                      width:'0.5'
                    }
                },
                axisLabel: {
                  textStyle: {
                    color: "#5A6683", //文字的颜色
                    fontSize: 15
                  },
                },
              },
              series: [
                {
                  name:'计划安装',
                  data: data.map(item=>item.installNum),
                  type: 'bar',
                  barWidth: 6,
                  barGap:'60%',
                },
                {
                  name:'计划顶升',
                  data: data.map(item=>item.upNum),
                  type: 'bar',
                  barWidth: 6,
                  barGap:'60%',
                },
                {
                  name:'计划拆卸',
                  data: data.map(item=>item.disNum),
                  type: 'bar',
                  barWidth: 6,
                  barGap:'60%',
                }
              ]
            }
          },
          handleClickChart(val){
            this.fnToListPlan({startDate:val.dataX,endDate:val.dataX})
          },
          handleClickChart1(val){
            this.fnToListPlan({stationCode:val.dataY.code,startDate:this.todayDate,endDate:this.todayDate})
          },
          // 获取未来7天作业数量数据
          getTodayPlanData(date) {
            this.$util.getPromise(`/statistics/crane/getWorkPlanCountByDay`,{date}).then((res) => {
              if (res && res.success) {
                let { countList,countData } = res.parameters
                this.$nextTick(()=>{
                  this.todayData=countData
                  countList=countList.map(item=>{
                    if(item.name=='空港委'){
                      item.name=item.name.substr(0,2)
                    }
                    return item
                  })
                  this.$f7.preloader.hide();
                  this.initTodayPlanChart(countList)
                })
              } else {
                this.$f7.preloader.hide();
                this.$f7.dialog.toast(res.message||'数据获取失败')
              }
            }).catch(e=>{
              console.log(e);
              this.$f7.preloader.hide();
              this.$f7.dialog.toast('数据获取失败')
            })
          },
          initTodayPlanChart(data){
            this.options={
                tooltip: {
                  trigger: 'item'
                },
                grid: {
                  top: '15%',
                  bottom: '10%',
                  left : '10%',
                  right:'2%',
                },
                xAxis: {
                  type: 'category',
                    data: data.map(item=>item.name),
                    axisLabel: {
                      show: true,
                        interval: 0,
                        textStyle: {
                        color: "#5A6683", //文字的颜色
                        fontSize: 10
                      },
                    },
                    axisLine:{
                      show:false,
                    },
                    axisTick:{
                      show:false,
                    },
                },
                yAxis: {
                  type: 'value',
                  minInterval: 1,
                  axisTick:{
                    show:false,
                  },
                  axisLine:{
                    show:false,
                  },
                  splitLine:{
                      lineStyle:{
                        color:'#EBEEF5',
                        width:'0.5'
                      }
                  },
                  axisLabel: {
                    textStyle: {
                      color: "#8995AC", //文字的颜色
                      fontSize: 12
                    },
                  },
                },
                series: [{
                    // data: data.map(item=>item.value),
                    data,
                    type: 'bar',
                    barWidth: 12,
                    itemStyle: {
                      normal:{
                        color: "#3E90FF",
                        barBorderRadius: 1,
                        label:{
                          show:false,
                          position:'top',
                          textStyle:{
                            color:'#243357',
                            fontWeight:'600',
                            fontSize:14
                          }
                        }
                      }
                    }
                  }
                ]
            }
          },
          // 获取未来7天的日期
          getDate(day=7){
            const dateArray = [];
            for (let i = 1; i < (day+1); i++) {
              const date = new Date(Date.now() + i * 24 * 60 * 60 * 1000);
              const year = date.getFullYear();
              const month = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1;
              const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
              dateArray.push(`${year}-${month}-${day}`);
            }
            return [dateArray[0],dateArray[dateArray.length-1]]
          },
          // 处理选择日期区间组件的回调函数
          handleMonthRange(val,field){
            localStorage.setItem(field,JSON.stringify(val))
            this[field]=val
            if(field=='defRange'){
              // 获取作业计划数据
              this.getData(
                "/statistics/crane/getWorkPlanStatisticsByDate",
                'modelData',
                {
                  beginDate:this.defRange[0],
                  endDate:this.defRange[1]
                },
              )
            }
          },
          // 处理选择日期组件的回调函数
          handleMonth(val){
            this.$f7.preloader.show();
            this.defDate=val
            localStorage.setItem('defDate',val)
            this.getTodayPlanData(val)
          },
          fnToList(params) {
            let url = `/business/qzjx/statistics/list`;
            url = this.$util.appendUrl(url,params);
            this.$f7router.navigate(url);
          },
          fnToListEng() {
            let url = `/business/qzjx/statistics/listEng`;
            this.$f7router.navigate(url);
          },
          fnToListPlan(params){
            let url = `/business/qzjx/statistics/workPlan`;
            url = this.$util.appendUrl(url,params);
            this.$f7router.navigate(url);
          },
          handleBack(){
            this.funcBack()
            this.$f7router.back()
          },
        },
        computed: {
          todayDate(){
            return this.$formatter.formatDate(new Date(),'yyyy-MM-dd')
          }
        }
      }
  }
}
</script>

<style lang="less" scoped>
@deep: ~">>>";
/deep/ .van-picker__title{
  flex-shrink: 0;
}
.v-statistics {
    padding: .625rem .9375rem;
    overflow-y: auto;
    background: #eff2f6;
}

.card-box {
  padding: .75rem 1rem;
  background: #ffffff;
  box-shadow: 0rem .625rem 1.25rem 0rem rgba(0, 0, 0, 0.05);
  border-radius: .5rem;
  margin-bottom: .9375rem;
  .line {
    width: 100%;
    height: 0rem;
    margin: 1.25rem 0;
    border-bottom: .0625rem dashed #D7DCE4;
  }
  .small-img{
    width: .9375rem;
    margin-right: .375rem;
  }
  .big-img{
    width: 2.375rem;
    margin-right: .8125rem;
  }
  .info-content{
        display: flex;
        justify-content: space-between;
        margin: .625rem 0;
        >div {
            width: 48%;
            padding: .9375rem .625rem;
            background: #F3F9FF;
            box-sizing: border-box;
            border-radius: .25rem;
            display: flex;
            align-items: center;
            &:nth-child(2){
              background: #EEFBF9;
            }

            img{
              width: 2.375rem;
              margin-right: .625rem;
            }
            >div {
                flex: 1;
                span{
                  font-size: 1.125rem;
                  font-weight: 600;
                  color: #0F1826;
                }
            }
        }
      }
  >h4 {
      margin: 0;
      display: flex;
      justify-content: space-between;

      >span {
          font-size: 1rem;
          font-weight: 600;
          color: #0f1826;
          line-height: 1.375rem;
      }

      >div {
          width: 4.6875rem;
          display: flex;
          flex-direction: row-reverse;
      }
  }

  .info {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin: .625rem 0;

      >div {
          width: 48%;
          padding: .625rem;
          background: linear-gradient(180deg, #F7FCFF 0%, #EEF7FF 100%);
          box-sizing: border-box;
          border-radius: .625rem;
          display: flex;
          align-items: center;
          border: .0625rem solid rgb(60 136 255);

          >div {
              flex: 1;
              //color: #61677A;

              >div {
                  &:nth-of-type(1) {
                      span {
                          font-size: 1.5rem;
                          margin-right: .25rem;
                      }
                  }
              }
          }
      }
  }
  .card-content {
      border-radius: .25rem;
      margin-bottom: .625rem;
      overflow: hidden;
      position: relative;
      border: .0625rem solid #D1E5FE;
      background: #FCFEFF;

      .title {
          color: #0f1826;
          font-size: .8125rem;
          display: flex;
          align-items: center;
          background: linear-gradient(229deg, #f3faff 100%, #EEF7FF 100%);
          padding: .75rem;
          border-bottom: .0625rem solid #D1E5FE;
          >i {
              width: .75rem;
              height: .75rem;
              flex-shrink: 0;
              margin-right: .375rem;
              background-repeat: no-repeat;
              background-position: center;
              background-size: cover;
              background-image: url("../../../../assets/img/qzjx/statistics/zfjy_1.png");
          }
          .right{
            display: flex;
            justify-content: space-between;
            flex: 1;
            .label{
              color: #333;
              font-size: .875rem;
            }
            .value{
              color: #0F1826;
              font-size: 1.125rem;
              font-weight: 600;
            }
          }


      }

      .box {
          width: 100%;
          box-sizing: border-box;
          padding: .625rem;
          background: #FCFEFF;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          position: relative;

          .data-item {
              flex: 1;
              margin-bottom: .375rem;

              >div {
                  text-align: center;

                  &:nth-of-type(1) {
                      font-size: 1.25rem;
                      font-weight: 600;
                  }

                  &:nth-of-type(2) {
                      color: #61677A;
                      font-size: .75rem;
                  }
              }
          }
          &::after{
            content: '';
            position: absolute;
            top: 50%;
            transform: translate(-50%,-50%);
            height: 2.1875rem;
            width: 0;
            left: 50%;
            border-left: .0625rem dashed #A7C5FF;
          }
      }

      .list-box {
          background: #fafafc;
          min-height: 6.375rem;

          .item {
              line-height: 1.375rem;
              color: #61677A;
              font-size: .75rem;
              display: flex;
              padding: 0 .5rem;
              margin-bottom: .25rem;

              >div {
                  flex: 1;
              }
          }
      }
      .plan-list{
        display: flex;
        padding: .9375rem 0;
        li{
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          flex: 1;
          &:after{
            content: '>';
            position: absolute;
            right: -0.25rem;
            top: 50%;
            transform: translateY(-50%);
            color: #CED6E0;
            font-size: 1.125rem;
            font-weight: 300;
          }
          &:last-child{
            &::after{
              display: none;
            }
          }
          .value{
            color: #1990FF;
            font-size: 1rem;
          }
        }
      }
      &.access{
        .data-item {
              flex: 1;
              margin-bottom: .375rem;

              >div {
                  text-align: center;

                  &:nth-of-type(1) {
                      font-size: 1.25rem;
                      font-weight: 600;
                  }

                  &:nth-of-type(2) {
                      color: #333;
                      font-size: .875rem;
                  }
              }
          }
          section{
            position: relative;
            flex: 1;
            padding: .625rem;
            > div,> ul{
              &:nth-child(2){
                margin-top: .5rem;
              }
            }
            &:after{
              content: '';
              position: absolute;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
              height: 70%;
              width: 0;
              border-right: .0625rem dashed #A7C5FF;
            }
            &:last-child:after{
              display: none;
            }
          }

          .content-box{
            display: flex;
            align-items: center;
          }
          .list-round{
            padding-left: 1rem;
            position: relative;
            color: #333333;
            font-size: .875rem;

            &::before{
              content: '';
              position: absolute;
              left: .1875rem;
              top: 50%;
              transform: translateY(-50%);
              width: .375rem;
              height: .375rem;
              z-index: 1;
              border-radius: .375rem;
              background: #1990FF;
            }
            &::after{
              content: '';
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
              width: .75rem;
              height: .75rem;
              border-radius: .75rem;
              background: rgba(51, 133, 255, 0.30);
            }
            &.purple{
              &:before{
                background: #7B9BFF;
              }
              &::after{
                background: rgba(51, 111, 255, 0.30);
              }
            }
          }
      }

  }
  .plan-box{
    display: flex;
    li{
      width: 32%;
      margin-right: 2%;
      background: #F7FAFE;
      padding: .9375rem;
      &:last-child{
        margin-right: 0;
      }
      .top{
        color: #333;
        font-size: .875rem;
        text-align: center;
        img{
          width: 1.625rem;
        }
        span{
          font-size: 1rem;
          font-weight: 600;
        }
      }
      .bottom{
        margin-top: .9375rem;
        .label,.value{
          color: #657AA7;
        }
        p{
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 0;
          line-height: 1.5625rem;
        }
      }
    }
  }
  .deviceList{
    display: flex;
    flex-wrap: wrap;
    li{
      position: relative;
      width: 48%;
      margin-right: 4%;
      background: #F7FAFE;
      padding: .625rem;
      padding-left: 1.875rem;
      box-sizing: border-box;
      &:nth-child(2n){
        margin-right: 0;
      }
      &:nth-child(n+3){
        margin-top: .625rem;
      }
      &::before{
        content: '';
        position: absolute;
        left: .8125rem;
        top: 50%;
        transform: translateY(-50%);
        width: .375rem;
        height: .375rem;
        z-index: 1;
        border-radius: .375rem;
        background: #F15A5A;
      }
      &::after{
        content: '';
        position: absolute;
        left: .625rem;
        top: 50%;
        transform: translateY(-50%);
        width: .75rem;
        height: .75rem;
        border-radius: .75rem;
        background: rgba(241, 90, 90, 0.30);
      }
    }
  }
  .label{
    color: #61677A;
    font-size: .75rem;
    line-height: 1.5625rem;
  }
  .value{
    color: #333333;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.5625rem;
  }
  .echarts {
      height: 10.625rem;
  }
  .planEcharts{
    height: 12.5rem;
    &.today{
      width: 110%!important;
      margin-left: -6%;
    }
  }
  .card-content-box{
    background: linear-gradient(180deg, #FFF7EB 0%, #FFF6EB 100%);
    border-radius: .375rem;
    display: flex;
    flex-direction: column;
    .tab-content {
        background: #ffffff;
        border-radius: .375rem;
        padding: .75rem 0;
        margin: 0 .75rem .75rem;
    }
    @{deep}.van-tabs__nav {
      .van-tabs__line{
          background: transparent!important;
          height: 0rem;
          width: 0rem;
          bottom: .875rem;
          border: .625rem solid #fff;
          border-top-color: transparent;
          border-bottom-color: #fff;
          border-left-color: transparent;
          border-right-color: transparent;
      }
      .van-tab{
          .van-tab__text{
              color: #61677A;
              >div{
                  display: flex;
                  align-items: center;
              }
          }
          i{
              width: 1.0625rem;
              height: 1.0625rem;
              background: url('../../../../assets/img/qzjx/statistics/icon9.png') no-repeat;
              display: inline-block;
              background-size: 100% 100%;
              margin-right: .3125rem;
          }
          &:nth-child(2){
              i{
                  background-image: url('../../../../assets/img/qzjx/statistics/icon10.png');
              }
          }
          &.van-tab--active .van-tab__text{
              font-weight: 700;
              color: #0F1826;
          }
      }
    }
  }
  .text {
    color: #61677A;
  }
  .df{
    display: flex;
  }
  .jcsb{
    justify-content: space-between;
  }
  .flex1{
    flex: 1;
  }
  .s-title{
    color: #0F1826;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

}
</style>
